import React from "react"
import Header from "../header/index"
import {isLogin,loggout} from "../../api/index"
import {Icon,Button} from "antd-mobile"
import "./mineDetail.css"
class MineDetail extends React.Component{
    constructor(){
        super()
        this.state={
            status:1,
            username:"",
            id:"",
            gift_amount:"",
            point:"",
            imgUrl:""
        }
    }
    componentDidMount(){
        isLogin().then(res=>{
            console.log(res.data)
            if(!res.data.avatar){
                this.setState({
                    status:res.data.status,
                    username:"登陆/注册"
                })
            }else{
                this.setState({
                    status:1,
                    username:res.data.username,
                    id:res.data.id,
                    gift_amount:res.data.gift_amount,
                    point:res.data.point,
                    imgUrl:`//elm.cangdu.org/img/${res.data.avatar}`    
                })
            }
        })
     }
     loggout(){
        loggout().then(res=>{
            console.log(res)
            this.props.history.push("/app/mine")
        })
     }
     editPassword(){
         this.props.history.push("/forget")
     }
     toAddress(){
         console.log(1)
         this.props.history.push("/mine/userInfo/address")
     }
      render(){
        //   console.log(this.state)
          return(
              <div className="mineDetail">
                <Header title={"账户信息"}/>
                <div className="userInfo-mask"></div>
                <div className="userInfo-main">
                    <div className="uploadImgWrap">
                        <input type="file" className="fileInput"/>
                        <h2 className="imgText">头像</h2>
                        <div className="userInfo-right">
                            <div className="imgWrap">
                                <img src={this.state.imgUrl}/>
                            </div>
                            <Icon type="right" className="userInfo-rightIcon" />
                        </div>
                    </div>
                    <div className="userInfo-item">
                        <h2>用户名</h2>
                        <div className="userInfo-right">
                             <span className="userInfo-userNameText">{this.state.status?this.state.username:"登陆注册"}</span>
                             <Icon type="right" className="userInfo-rightIcon" />
                        </div>
                    </div>
                    <div className="userInfo-item" onClick={this.toAddress.bind(this)}>
                        <h2>收货地址</h2>
                        <div className="userInfo-right">
                             
                             <Icon type="right" className="userInfo-rightIcon" />
                        </div>
                    </div>
                </div>
                <div className="userInfo-title">
                    <span>账号绑定</span>
                </div>
                <div className="userInfo-item">
                        <div className="userInfo-left">
                        <div className="userInfo-phoneicon"></div>
                             <h2>手机</h2>
                        </div>
                        <div className="userInfo-right">
                             
                             <Icon type="right" className="userInfo-rightIcon" />
                        </div>
                </div>
                <div className="userInfo-title">
                    <span>安全设置</span>
                </div>
                <div className="userInfo-item" onClick={this.editPassword.bind(this)} >
                        <h2>登陆密码</h2>
                        <div className="userInfo-right">
                             <span className="userInfo-userNameText" >修改</span>
                             <Icon type="right" className="userInfo-rightIcon" />
                        </div>
                </div>
                <Button className="userInfo-loggout" onClick={this.loggout.bind(this)} type="warning">退出登陆</Button>
              </div>
          )
      }
}

export default MineDetail